<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        table tr td {
            border: 1px solid black;
        }

        td>* {
            padding: 1px;
            vertical-align: middle;
        }
    </style>
    <script>
        function init() {
            let url = "/data/get_character_skills";
            let xhr = new XMLHttpRequest();
            let table = document.getElementById("table");
            while (table.firstChild) {
                table.removeChild(table.firstChild);
            }
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText);
                    let tr = document.createElement("tr");
                    let th1 = document.createElement("th");
                    let th2 = document.createElement("th");
                    th1.innerHTML = "角色名称";
                    th2.innerHTML = "技能";
                    tr.appendChild(th1);
                    tr.appendChild(th2);
                    table.appendChild(tr);
                    for (let i = 0; i < data.length; i++) {
                        let tr = document.createElement("tr");
                        let td1 = document.createElement("td");
                        let td2 = document.createElement("td");
                        let td3 = document.createElement("td");
                        td1.innerHTML = data[i].character_name;
                        let ids = (data[i].ids == null ? "" : data[i].ids).split(",");
                        let skill_ids = data[i].skill_ids == null ? "" : data[i].skill_ids.split(",");
                        let skill_names = data[i].skill_names == null ? "" : data[i].skill_names.split(",");
                        let skill_icons = data[i].skill_icons == null ? "" : data[i].skill_icons.split(",");
                        for (let i = 0; i < skill_ids.length; i++) {
                            td2.innerHTML += skill_icons[i] == null ? "" : `<img src="${skill_icons[i]}" width="45px" height="45px" onmouseover="show_skill(${skill_ids[i]})" onmouseout="hide_skill()"><button onclick="del_skill(${ids[i]})">x</button><br/>`;
                        }
                        td3.innerHTML = `<button onclick="show_skills(${data[i].character_id},[${skill_ids}])">+</button>`
                        tr.appendChild(td1);
                        tr.appendChild(td2);
                        tr.appendChild(td3);
                        table.appendChild(tr);
                    }
                }
            }
        }
        function del_skill(_id) {
            let url = "/data/del_character_skills?id=" + _id;
            //通过ajax请求url，并将返回结果写到table中
            let xhr = new XMLHttpRequest();
            let table_has_header = false;
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    init()
                }
            }
        }
        function hide_skill() {
            document.getElementById("skill_info").style.display = "none";
        }

        function show_skill(_id) {
            let div = document.getElementById("skill_info");
            let url = "/data/query?type=skills&id=" + _id;
            div.innerHTML = ""

            //通过ajax请求url，并将返回结果写到table中
            let xhr = new XMLHttpRequest();
            let table_has_header = false;
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText)[0];
                    div.innerHTML += `<img src="${data.icon}" width="45px" height="45px" /><br />`
                    div.innerHTML += `名称：${data.name}<br />`
                    div.innerHTML += `描述：${data.description}<br />`
                    div.innerHTML += `属性：${data.attributes}<br />`
                    div.style.display = "block"
                }
            }
        }
        function add_skill(_character_id, _id) {
            let url = "/data/add_character_skills";
            let xhr = new XMLHttpRequest();
            xhr.open("POST", url, true);
            var data = JSON.stringify({ character_id: _character_id, skill_id: _id });
            xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(data);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    let data = JSON.parse(xhr.responseText);
                    document.getElementById("skills_div").style.display = "none";
                    init()
                }
            }
        }
        function show_skills(_character_id, _ids) {
            let url = "/data/query?type=skills";
            let xhr = new XMLHttpRequest();
            //删除table下所有子节点
            let table = document.getElementById("skills_table");
            console.log(_ids);
            while (table.firstChild) {
                table.removeChild(table.firstChild);
            }
            xhr.open("GET", url, true);
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    for (const iterator of JSON.parse(xhr.responseText)) {
                        //判断iterator是否在_ids中
                        if (_ids.toString().indexOf(iterator.id) == -1) {
                            let tr = document.createElement("tr");
                            let td1 = document.createElement("td");
                            let td2 = document.createElement("td");
                            let td3 = document.createElement("td");
                            td1.innerHTML = iterator.name;
                            td2.innerHTML = iterator.icon == null ? "" : `<img src="${iterator.icon}" width="45px" height="45px" onmouseover="show_skill(this)">`;
                            td3.innerHTML = `<button onclick="add_skill(${_character_id},${iterator.id})">+</button>`
                            td3.innerHTML += `<button onclick="hideDiv()">x</button>`
                            tr.appendChild(td1);
                            tr.appendChild(td2);
                            tr.appendChild(td3);
                            table.appendChild(tr);
                        }
                    }
                    //div id=skills_div的style display改为显示
                    document.getElementById("skills_div").style.display = "block";
                }
            }
        }
        function hideDiv() {
            document.getElementById("skills_div").style.display = "none";
        }
    </script>
</head>

<body onload="init()">
    <table id="table"></table>
    <div id="skills_div" style="display: none;border: 1px solid red;">
        <table id="skills_table"></table>
    </div>
    <div id="skill_info" style="display: none;border: 1px solid blue;"></div>
</body>

</html>